<template>
  <div class="situation-statistics">
    <nanning-screen-border-box :bgImg="bgImg">
      <screen-title>态势统计</screen-title>
      <div class="situation-statistics-content">
        <div class="statistics">
          <div class="statistics-content">
            <div class="num">{{ totalNum | formatNumber }}</div>
            <div class="tip">长途客流量</div>
          </div>
        </div>
        <div class="title">今日客流排行</div>
        <div class="customer-flow-ranking">
          <screen-chart @initCb="chartInit"></screen-chart>
        </div>
      </div>
    </nanning-screen-border-box>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { getSecurityRankChartOption } from './option'
import { numAnimation } from 'utils/common'
@Component({
  name: 'situation-statistics'
})
export default class SituationStatistics extends Vue {
  private bgImg: string = require('assets/images/box-border-2.png')

  private totalNum = 0

  mounted() {
    numAnimation(this.totalNum, 479, this, 'totalNum')
  }

  chartInit(chart: any) {
    chart.clear()
    setTimeout(() => {
      chart.setOption(getSecurityRankChartOption())
    }, 300)
  }
}
</script>

<style lang="scss" scoped>
.situation-statistics {
  width: 100%;
  height: 59.27%;
  &-content {
    width: 100%;
    height: calc(100% - 50px);
    .statistics {
      width: 100%;
      height: calc(50% - 38px);
      box-sizing: border-box;
      padding: 0 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      &-content {
        width: 442px;
        height: 134px;
        background: url('../../../../../assets/images/situational-awareness/coach-bus-way-total-bg.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        padding-left: 185px;
        .num {
          font-size: 30px;
          line-height: 42px;
          font-family: 'PingFang Regular';
          font-weight: bold;
          color: #ffffff;
        }
        .tip {
          font-size: 14px;
          line-height: 26px;
          font-family: 'PingFang Regular';
          font-weight: 400;
          color: #ffffff;
          opacity: 0.76;
        }
      }
    }
    .title {
      width: 100%;
      height: 38px;
      font-size: 18px;
      font-family: 'PingFang Regular';
      color: #fff;
      line-height: 38px;
      text-indent: 16px;
      position: relative;
      box-sizing: border-box;
      padding: 0 18px;
      &::before {
        content: '';
        position: absolute;
        left: 18px;
        top: 14px;
        width: 10px;
        height: 10px;
        background: #23fffc;
        border-radius: 50%;
      }
    }
    .customer-flow-ranking {
      width: 100%;
      height: 50%;
    }
  }
}
</style>
